<!--
 * @Author: wcx 1055127249@qq.com
 * @Date: 2024-12-30 09:13:43
 * @LastEditors: wcx 1055127249@qq.com
 * @LastEditTime: 2025-01-16 12:29:09
 * @FilePath: \my-project\src\components\charts\pei.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="chart-item">
    <div v-if="channelData.length === 0" class="inbot"><el-empty/></div>
    <div ref="canvas" style="height:100%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data () {
    return {
      myChart: null
    }
  },
  mounted () {
    this.myChart = echarts.init(this.$refs.canvas)
    this.renderChart()
    window.addEventListener('resize', () => {
      this.myChart.resize()
    })
  },
  computed: {
    channelData () {
      return [
        { transAmount: 3000, channel: '支付宝' },
        { transAmount: 1000, channel: '微信' },
        { transAmount: 800, channel: '云闪付' },
        { transAmount: 500, channel: '信用卡' },
        { transAmount: 100, channel: '其他' }
      ]
    }
  },
  watch: {
    channelData () {
      this.renderChart()
    }
  },
  methods: {
    renderChart () {
      const myChart = this.myChart
      myChart.setOption({
        // color: ['#8aa6ff', '#ecec8c', '#a5d5e3', '#c8b1ff', '#8ae6ff'],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            labelLayout (data) {
              const isLeft = data.labelRect.x < myChart.getWidth() / 2
              return { align: isLeft ? 'left' : 'right' }
            },
            data: this.channelData.filter(i => i.transAmount > 0).map(i => {
              return {
                value: i.transAmount,
                name: i.channel || ''
              }
            })
          }
        ]
      })
    }
  }
}
</script>
